<template>
  <el-container style="height: 100vh;margin-left: -20px;">
    <el-header>
      <headview></headview>
    </el-header>
    <el-container style="padding: 0 20px; ">
      <el-aside width="200px" style="background-color: rgb(84, 92, 100);">
        <container></container>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs type="card" v-model="changetableTabsValue" closable 
          @tab-remove="removeTab" @tab-click="clickTab">
            <el-tab-pane v-for="item in tableTabs" :key="item.name" :label="item.title" :name="item.name">
              <span slot="label"><i :class="item.icon"></i>
                {{ item.title }}</span>
            </el-tab-pane>
          </el-tabs>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import headview from './layout/HeadView.vue'
import container from './layout/ContainerView.vue'
import { mapState, mapMutations } from 'vuex'
export default {

  data() {
    return{
    }
  },
  computed:{
    ...mapState(['tableTabsValue', 'tableTabs']),

    //通过计算属性的方式 达到可以 v-model store 中的属性共享
    changetableTabsValue: {
      get: function () {
        return this.tableTabsValue;
      },
      set: function (value) {
        this.edittableTabsValue(value);
      }
    }
  },
  methods: {
    ...mapMutations(['clickTab', 'removeTab', 'edittableTabsValue']),

  }, components: {
    headview,
    container
  }
}
</script>
<style>
	body{
		margin: 0px;
	}
</style>